<template>
<div class="rank-container">
  <div class="rank-left">销量榜</div>
  <div class="rank-right">
    <div class="scroll-container" ref="scrollContainer" @mouseenter="pauseScroll" @mouseleave="resumeScroll">
      <div class="scroll-content" :style="{ transform: `translateX(${scrollOffset}px)` }">
        <div v-for="(item, index) in salesData" :key="index" class="item">
          <img :src="item.imageUrl" alt="商品图片" class="item-image" />
        </div>
      </div>
    </div>
  </div>
  <div class="rank-left">好评榜</div>
  <div class="rank-right">
    <div class="scroll-container" ref="scrollContainer" @mouseenter="pauseScroll" @mouseleave="resumeScroll">
      <div class="scroll-content" :style="{ transform: `translateX(${scrollOffset}px)` }">
        <div v-for="(item, index) in salesData" :key="index" class="item">
          <img :src="item.imageUrl" alt="商品图片" class="item-image" />
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import axios from "axios";
import {fetchProductList} from "@/common/net/api";

export default defineComponent({
  name: "SalesRank",
  setup() {
    const salesData = ref<any[]>([]);
    const scrollContainer = ref<HTMLDivElement | null>(null);
    const scrollOffset = ref(0);
    let scrollInterval: number | null = null;

    // 获取销量榜数据
    const fetchSalesData = async () => {
      try {
        const response = await fetchProductList(1, 10);
        salesData.value = response.records || [];
      } catch (error) {
        console.error("Failed to fetch sales data:", error);
      }
    };

    // 滚动动画
    const startScroll = () => {
      if (scrollInterval) return; // 如果已经存在滚动定时器，直接返回
      if (salesData.value.length === 0) return; // 如果数组为空，直接返回

      let scrollDirection = -10; // 初始滚动方向，-10 表示向左滚动

      scrollInterval = setInterval(() => {
        scrollOffset.value += scrollDirection; // 根据方向调整滚动偏移量

        // 检查是否到达最右边
        if (scrollOffset.value < -scrollContainer.value!.scrollWidth) {
          scrollDirection = 10; // 改变滚动方向为向右
        }

        // 检查是否到达最左边
        if (scrollOffset.value >= 0) {
          scrollDirection = -10; // 改变滚动方向为向左
        }
      }, 100);
    };

    // 暂停滚动
    const pauseScroll = () => {
      if (scrollInterval) clearInterval(scrollInterval);
      scrollInterval = null;
    };

    // 恢复滚动
    const resumeScroll = () => {
      startScroll();
    };

    onMounted(() => {
      fetchSalesData();
      startScroll();
    });

    return {
      salesData,
      scrollContainer,
      scrollOffset,
      pauseScroll,
      resumeScroll,
    };
  },
});
</script>

<style scoped>
.rank-container {
  display: flex;
  width: 1200px;
  height: 100px;
  margin: 10px auto;
  overflow: hidden;
}

.rank-left {
  width: 30px;
  text-align: center;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
}

.rank-right {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.scroll-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.scroll-content {
  display: flex;
  transition: transform 0.1s linear;
}

.item {
  width: 100px;
  margin-right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid gold; /* 添加金色边框 */
}

.item-image {
  height: 96px;
}
</style>
